<template>
  <div class="statistical-4">
    <div class="col">
      <div class="row">
        <TableRadius :tableData="tableData" title="人才服务活动"></TableRadius>
      </div>
      <div class="row">
        <div class="chart" id="chart1"></div>
      </div>
    </div>
    <div class="col full">
      <div class="row map">
        <Map class="global-map"></Map>
      </div>
      <div class="row" id="icon-number">
        <div class="title">人才专项资金数据</div>
        <IconNumber class="icon-number" name="人才培养补助" value="7600万元" icon="@/assets/images/statistical4/1.png"></IconNumber>
        <IconNumber class="icon-number" name="人才平台补助" value="2200万元" icon="@/assets/images/statistical4/2.png"></IconNumber>
        <IconNumber class="icon-number" name="大学生政策补助" value="9600万元" icon="@/assets/images/statistical4/3.png"></IconNumber>
        <IconNumber class="icon-number" name="人才引进补助" value="3008万元" icon="@/assets/images/statistical4/4.png"></IconNumber>
        <IconNumber class="icon-number" name="人才服务补助" value="877万元" icon="@/assets/images/statistical4/5.png"></IconNumber>
      </div>
    </div>
    <div class="col">
      <div class="row">
        <div class="chart" id="chart2"></div>
      </div>
      <div class="row">
        <Indicators2></Indicators2>
      </div>
    </div>
  </div>
</template>

<script>
import TableRadius from "@/components/Table/TableRadius.vue";
import {getArrByKey, getSymbolData} from "@/utils/chart";
import Indicators2 from "@/components/Indicators/Indicators2.vue";
import IconNumber from "@/components/IconNumber.vue";
import Map from "@/components/Map.vue";

export default {
  name: "Statistical4",
  components: {Map, IconNumber, Indicators2, TableRadius},
  data(){
    return{
      tableData:{
        head:[
          {name:'活动主题',width:35},
          {name:'牵头单位',width:25},
          {name:'活动时间',width:25},
          {name:'人数',width:15},
        ],
        data:[
          ['才聚酒泉·筑梦飞天','省政府新闻办','2022-12-22','351'],
          ['人才夜市','市人才中心','2022-06-01','500'],
          ['暖冬送岗促就业','市人才中心','2022-05-25','841'],
          ['百日攻坚行动','市人社局','2022-05-01','391'],
          ['劳务大篷车','市人社局','2022-03-18','691'],
        ]
      },
      charts:{
        charts1:null,
        charts2:null,
      }
    }
  },
  methods:{
    initChart1() {
      this.charts.chart1 = this.$echarts.init(document.getElementById('chart1'));
      this.charts.chart1.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let data = [
        {name: '高校毕业生租房', value: 4500},
        {name: '高校毕业生实训生活补助', value: 2113},
        {name: '高校毕业生安家补贴', value: 3548},
        {name: '高层次人才补助', value: 4124},
        {name: '高层次人才绿卡申请', value: 3789},
      ];
      let maxValue = Math.max.apply(null, getArrByKey(data));
      let bgArr = data.map(() => {
        return maxValue + maxValue * 0.2;
      });
      let stackValue = (maxValue + maxValue * 0.2) * 0.04;//偏移量
      let option = {
        title: {
          text: '人才线上服务',
          left: 'center',
          top: 15,
          textStyle: {
            color: '#fff',
            fontSize: 17,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: (e) => {
            if (e.seriesIndex == 3) {
              return `<p class="tool-title"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${e.color.colorStops[1].color};"></span>${e.name} <span style="font-size: 16px;color:${e.color.colorStops[1].color}">${e.value + stackValue}</span>次</p>`
            }
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {
            show: true, textStyle: {color: '#fff', fontSize: 14,lineHeight:16}, formatter: (e) => {
              let text=e;
              if(e.length>8){
                text=e.slice(0, 4) + '\n' + e.slice(4,8)+ '\n' + e.slice(8,12);
              }else if(e.length>4){
                text=e.slice(0, 4) + '\n' + e.slice(4,8)
              }
              return text;
            }
          },
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          data: getArrByKey(data, 'name'),
        },
        yAxis: {
          name: '单位：次',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
          },
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        series: [
          //背景柱身
          {
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: 'rgba(73,73,25,0.5)',
              }
            },
            emphasis: {
              disabled: true
            },
            data: bgArr
          },
          //背景顶部
          {
            type: "pictorialBar",
            symbol: 'diamond',
            symbolPosition: "end",
            symbolSize: [20, 10],
            symbolOffset: [0, -5],
            z: 12,
            itemStyle: {
              normal: {
                color: '#6c6c34',
              }
            },
            emphasis: {
              disabled: true
            },
            data: bgArr
          },
          //撑起柱身
          {
            type: 'bar',
            stack: 'barBody',
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)',
              },
            },
            emphasis: {
              disabled: true
            },
            data: bgArr.map(() => stackValue)
          },
          //柱身
          {
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            stack: 'barBody',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [{
                      offset: 0,
                      color: "#bc4405"
                    },
                      {
                        offset: 1,
                        color: "#c6aa2c"
                      }
                    ],
                    false
                )
              }
            },
            data: getSymbolData(data).map((item) => {
              item.value = item.value - stackValue
              return item
            })
          },
          //顶部菱形
          {
            type: "pictorialBar",
            symbol: 'diamond',
            symbolSize: [20, 10],
            symbolOffset: [0, -5],
            symbolPosition: "end",
            itemStyle: {
              normal: {
                color: '#cb9b39',
              }
            },
            z: 12,
            data: getArrByKey(data, 'value').map((item) => item)
          },
          //底部菱形
          {
            name: "",
            type: "pictorialBar",
            symbol: 'diamond',
            symbolSize: [20, 10],
            symbolOffset: [0, -4],
            symbolPosition: "start",
            itemStyle: {
              normal: {
                color: '#cb9b39',
              }
            },
            z: 12,
            data: bgArr.map(() => stackValue)
          },
        ]
      }
      this.charts.chart1.hideLoading();
      this.charts.chart1.setOption(option)
    },
    initChart2() {
      this.charts.chart2 = this.$echarts.init(document.getElementById('chart2'));
      this.charts.chart2.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let data = [
        {name: '高校毕业生租房', value: 4500},
        {name: '高校毕业生实训生活补助', value: 2113},
        {name: '高校毕业生安家补贴', value: 3548},
        {name: '高层次人才补助', value: 4124},
        {name: '高层次人才绿卡申请', value: 3789},
      ];
      let maxValue = Math.max.apply(null, getArrByKey(data));
      let bgArr = data.map(() => {
        return maxValue + maxValue * 0.2;
      });
      let stackValue = (maxValue + maxValue * 0.2) * 0.04;//偏移量
      let option = {
        title: {
          text: '办理事项TOP5',
          left: 'center',
          top: 15,
          textStyle: {
            color: '#fff',
            fontSize: 17,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: (e) => {
            if (e.seriesIndex == 3) {
              return `<p class="tool-title"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${e.color.colorStops[1].color};"></span>${e.name} <span style="font-size: 16px;color:${e.color.colorStops[1].color}">${e.value + stackValue}</span>次</p>`
            }
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {
            show: true, textStyle: {color: '#fff', fontSize: 14}, formatter: (e) => {
              let text=e;
              if(e.length>8){
                text=e.slice(0, 4) + '\n' + e.slice(4,8)+ '\n' + e.slice(8,12);
              }else if(e.length>4){
                text=e.slice(0, 4) + '\n' + e.slice(4,8)
              }
              return text;
            }
          },
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          data: getArrByKey(data, 'name'),
        },
        yAxis: {
          name: '单位：个',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
          },
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        series: [
          //背景柱身
          {
            type: 'bar',
            barWidth: 15,
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: 'rgba(9,73,52,0.5)',
              }
            },
            emphasis: {
              disabled: true
            },
            data: bgArr
          },
          //背景顶部
          {
            type: "pictorialBar",
            symbol: 'circle',
            symbolPosition: "end",
            symbolSize: [15, 10],
            symbolOffset: [0, -5],
            z: 12,
            itemStyle: {
              normal: {
                color: '#094934',
              }
            },
            emphasis: {
              disabled: true
            },
            data: bgArr
          },
          //撑起柱身
          {
            type: 'bar',
            stack: 'barBody',
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)',
              },
            },
            emphasis: {
              disabled: true
            },
            data: bgArr.map(() => stackValue)
          },
          //柱身
          {
            type: 'bar',
            barWidth: 15,
            barGap: '-100%',
            stack: 'barBody',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [{
                      offset: 0,
                      color: "#4beab2"
                    },
                      {
                        offset: 1,
                        color: "#209988"
                      }
                    ],
                    false
                )
              }
            },
            data: getSymbolData(data).map((item) => {
              item.value = item.value - stackValue
              return item
            })
          },
          //顶部菱形
          {
            type: "pictorialBar",
            symbol: 'circle',
            symbolSize: [15, 10],
            symbolOffset: [0, -5],
            symbolPosition: "end",
            itemStyle: {
              normal: {
                color: '#8af6d0',
              }
            },
            z: 12,
            data: getArrByKey(data, 'value').map((item) => item)
          },
          //底部菱形
          {
            name: "",
            type: "pictorialBar",
            symbol: 'circle',
            symbolSize: [15, 10],
            symbolOffset: [0, -4],
            symbolPosition: "start",
            itemStyle: {
              normal: {
                color: '#8af6d0',
              }
            },
            z: 12,
            data: bgArr.map(() => stackValue)
          },
        ]
      }
      this.charts.chart2.hideLoading();
      this.charts.chart2.setOption(option)
    },
  },
  beforeDestroy() {
    this.$bus.$off('resize')
  },
  mounted() {
    this.initChart1();
    this.initChart2();
    this.$bus.$on('resize', () => {
      this.$bus.$on('resize', () => {
        Object.keys(this.charts).forEach((key) => {
          this.charts[key] && this.charts[key].resize()
        })
      })
    })
  }
}
</script>

<style scoped lang="scss">
.statistical-4 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .col {
    height: 100%;
    width: calc(25% - 10px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .row {
      width: 100%;
      height: calc((100% - 20px) / 2);
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(12px);

      .chart {
        width: 100%;
        height: 100%;
      }
    }
    #icon-number{
      padding: 20px 40px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
      .title {
        width: 100%;
        color: #fff;
        font-size: 17px;
        font-weight: bold;
        height: 40px;
        display: flex;
        justify-content: center;
      }
      .icon-number{
        height: calc(100% - 60px);
        margin-top: 20px;
      }
    }
    .row.min{
      height: calc((100% - 20px) / 3);
    }
  }

  .col.full {
    width: calc(50% - 20px);

    .row {
      height: calc((100% - 40px) / 3);
    }

    .row.map {
      height: 65%;
      background: none;
      backdrop-filter: none;
    }
  }
}
</style>
